<template>
  <div style="min-height: 100vh;">
    <div class="table-page-search-wrapper">
      <div class="knowledge-search">
        <a-form layout="inline">
          <a-row :gutter="24">
            <template>
              <a-col :md="9" :sm="12" style="float: left;overflow: hidden;">
                <el-select
                  v-model="value"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  size="small"
                  style="width: 100%"
                >
                  <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
                </el-select>
              </a-col>
              <a-button type="primary" icon="search" @click="searchOne()">查询</a-button>
            </template>
          </a-row>
        </a-form>
      </div>
      <a-form layout="inline">
        <a-row :gutter="24">
          <template>
            <a-col :md="17" :sm="20" style="float: left;overflow: hidden;">
              <div class="knowledge-details">
                <a-form layout="inline">
                  <a-row :gutter="24">
                    <template>
                      <a-col :md="3" :sm="4" style="float: left;overflow: hidden;">
                        <p>科室</p>
                      </a-col>
                      <a-col :md="21" :sm="20" class="knowledge-details-name">
                        <a-row
                          :gutter="24"
                          class="knowledge-details-name-frist knowledge-details-name-line"
                        >
                          <a-col
                            :md="3"
                            :sm="4"
                            v-for="(user,index ) in dataSource"
                            :key="user"
                            @click="forSearch(user.depName,index)"
                          >
                            <li :class="{red:i == index}">{{user.depName}}</li>
                          </a-col>
                        </a-row>
                      </a-col>
                    </template>
                  </a-row>
                </a-form>
              </div>
            </a-col>
          </template>
        </a-row>
      </a-form>
    </div>
    <div class="classification-details">
      <div v-show="!inneryes" style="text-align: center;margin-left: -200px">
        <img src="../../assets/images/zhaobudao.png" alt />
      </div>
      <div v-show="inneryes" class="classification-details-inner" v-for="(key,item) in knoIiOwnerAll" :key="item" >
        <a-row>
          <a-col :span="3">
            <router-link :to="`/medicalGraphicsLibrarylist/home/${key.id}`">
              <img
                style="width: 150px;height: 100px;"
                :src="`http://123.56.85.94:2020/${key.picture_url}`"
                alt
              />
            </router-link>
          </a-col>
          <a-col :span="14" class="classification-details-inner-col">
            <a-row>
              <a-col @click="jumpWindow(key.id)" :span="24" class="classification-details-inner-text">
                {{key.title_name}}
              </a-col>
              <a-col :span="24" class="classification-details-inner-text1">{{ key.resume }}</a-col>
              <a-col :span="24" class="classification-details-inner-text1">
                <a-col :md="3" :sm="4" style="float: left;overflow: hidden;">
                  <p>{{key.create_time.slice(0,10)}}</p>
                </a-col>
                <a-col :md="19" :sm="4" style="float: left;overflow: hidden;"></a-col>
                <!-- <a-col :md="2" :sm="4" style="float: left;overflow: hidden;color: #38c3c8;">
                  <router-link
                    :to="`/medicalGraphicsLibrarylist/home/${key.id}`"
                    class="hover-change"
                  >更多详情>></router-link>
                </a-col> -->
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
			<a-row style="text-align: right;margin-top: 25px;margin-right: 15px;">
			  <a-col :span="8"></a-col>
			  <a-col :span="16">
			    <a-pagination
			      showSizeChanger
			      :pageSize.sync="pageSize"
			      @showSizeChange="onShowSizeChange"
			      :total="totalListNumber"
			      @change="pageChange"
			      class="page"
			    />
			  </a-col>
			</a-row>
    </div>
    <company-profile />
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/zkxhKnowledge'
import CompanyProfile from '../../components/knowlage/companyProfile'
import KnowTopnav from '../../components/knowlage/knowtopnav'
import { getAction } from '@/api/manage'
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'

const indexKey = '/dashboard/analysis'

export default {
  //这是医学图形库
  name: 'MedicalGraphicsLibrary',
  mixins: [JeecgListMixin],
  components: {
    CompanyProfile,
    KnowTopnav,
    GlobalLayout,
    Contextmenu
  },
  data() {
    return {
      columns: [],
      knoIiOwnerAll: [],
      searchAll: '',
      i: '',
      inneryes: true,
      // 请求参数
      url: {
        list: '/knowledge/knoCgOwner/getDepAll',
        listseach: '/knowledge/knoCgOwner/list',
        fuzzysearch: '/es/searchFull/getSearchDiseaseOrDrugsAll',
        getSearchPublicList: '/es/searchFull/getSearchPublicList',
        querySearchList: '/knowledge/knoPublic/querySearchList'
      },
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ['张洪亮'],
      pageList: [],
      linkList: [],
      activePage: '',
      modoultouse: '',
      menuVisible: false,
      pageSize: 10,
      totalListNumber: 0,//数据总条数
      currentPage: 0,//当前页
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `${item}`, label: `${item}` }
    })
  },
  created() {
    this.getInfoList('');
  },
  methods: {
    getInfoList(serchName){
      console.log("serchName:::::" + serchName);
      getAction(this.url.getSearchPublicList, { searchType: 7, searchName: serchName,pageNo: this.currentPage,pageSize: this.pageSize }).then(res => {
        console.log("医学图形库：：：：：：："+JSON.stringify(res));
        if (res.success) {
          if(res.result.recordList.length == 0){
            this.inneryes = false;
          }else{
            this.inneryes = true;
            this.knoIiOwnerAll = res.result.recordList;
            this.totalListNumber = res.result.recordCount;
            this.currentPage = res.result.currentPage
          }
          
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    pageChange(data){
      this.currentPage = data;
      this.getInfoList('');
    },
    onShowSizeChange(current, pgeSize){
      this.pageSize = pgeSize;
      this.getInfoList('');
    },
    jumpWindow(itemId){
      let routeUrl = this.$router.resolve({path:'/newlist/detail',query:{id: itemId,type:7}});
      window.open(routeUrl.href, '_blank');
    },
    remoteMethod(query) {
      
      this.modoultouse = query
      getAction(this.url.querySearchList, { categoryType: 2, titleName: query }).then(res => {
        if (res.success) {
          let soon = []
          for (var i = 0; i < res.result.length; i++) {
            soon.push(res.result[i].TitleName)
          }
          this.states = soon
          this.list = this.states.map(item => {
            return { value: `${item}`, label: `${item}` }
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
      if (query !== '') {
        this.options = this.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
        })
      } else {
        this.options = []
      }
    },
    searchOne(e) {
      let lsSerchName = '';
      if (this.value.length == 0) {
        this.value = this.modoultouse
        if(this.value[0] != ''){
          lsSerchName = this.value[0];
        }else{
          lsSerchName = "''";
        }
        this.getInfoList(lsSerchName);
        
      } else {
        lsSerchName = '"' + this.value[0] + '"';
        this.getInfoList(lsSerchName);
      }
      this.value = [];
    },
    forSearch(e, index) {
      this.i = index
      this.getInfoList(e);
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/knowlagepublic.less';
</style>